<template>
  <tbc-dialog ref="dialog" title="商品类型" width="700px" basic>
    <el-row type="flex" style="flex-wrap: wrap;" justify="center">
      <div v-for="(item, index) in typeList"
           :key="index" @click="selectGoodsType(item)"
           style="margin:20px;text-align: center;border:1px solid #CCC;cursor:pointer;border-radius: 4px;padding: 30px">
        {{ item.label }}
      </div>
    </el-row>
  </tbc-dialog>
</template>
<script>
export default {

  data() {
    return {
      typeList: [
        {label: '普通商品', code: 'general', value: 1, desc: ''},
        {label: '虚拟商品', code: 'virtual', value: 2, desc: ''},
        {label: '资源商品', code: 'resource', value: 3, desc: ''},
      ],
      typeCode: 'general',
      query: {}
    }
  },

  methods: {

    show(query) {
      if (typeof query === 'undefined') query = {}
      this.query = query
      this.$refs.dialog.show()
    },

    close() {
      this.$refs.dialog.close()
    },

    selectGoodsType(item) {
      this.query.type = item.code
      this.$router.push({name: 'goods-add', query: this.query})
      this.close()
    }
  }
}
</script>